<template>
    <div class="nav-bar">
      <div @click="toHome">
        <img src="../assets/tabbar/home.png" alt="" v-if="showIndex!=0">
        <img src="../assets/tabbar/home-active.png" alt="" v-else>
        <div :class="{'active':showIndex==0}">点外卖</div>
      </div>
      <div @click="toMe">
        <img src="../assets/tabbar/me.png" alt="" v-if="showIndex!=1">
        <img src="../assets/tabbar/me-active.png" alt="" v-else>
        <div :class="{'active':showIndex==1}">我的</div>
      </div>
    </div>
</template>
<script>

export default {
    data(){
        return{
          
        }
    },
    props:{
      showIndex:{
        default:-1
      }
    },
    methods: {
      toHome(){
        this.$router.push('Home')
      },
      toMe(){
        this.$router.push('Me')
      }
    },
}
</script>
<style lang="scss" scoped>
    /* 底部栏 */
.nav-bar{
  position: fixed;
  height: 100px;
  bottom: 0;
  width:100%;
  display: flex;
  justify-content: space-around;
  z-index:999999;
  background: #fff;
  img{
    width:50px;
    height: 50px;
    padding: 1px 0;
  }
  .active{
    color:#0180CF;
  }
}
</style>